<template>
  <div class="loginContainer">
    <NavBar>
      <div class="left head_goback"  slot="left" @click="search">
        <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
	    			<circle cx="8" cy="8" r="7" stroke="rgb(0,0,0)" stroke-width="1" fill="none"/>
	    			<line x1="14" y1="14" x2="20" y2="20" style="stroke:rgb(0,0,0);stroke-width:2"/>
	      </svg>
      </div>
      <div class="center" slot="center" @click="selectcity">学山文化创意谷</div>
      <div slot="right" class="right" @click="login">
        <p v-if="show === false">登录|注册</p>
        <p v-else ><van-icon name="user-o" color="#1989fa" size="20" /></p>
      </div>
    </NavBar>
    <!-- 食品种类 -->
    <TypeFood />
    <div class="shangjia">
      <van-icon name="bag-o" />
      <span>附近商家</span>
    </div>
    <!-- 商家列表 -->
    <shop-list :shops="shops"></shop-list>
  </div>
</template>

<script>
import {getFoodShops} from "../../api/reques"
import TypeFood from "../../components/TypeFood.vue";
import NavBar from "../../components/NavBar.vue";
import ShopList  from "../../components/shopList/ShopList.vue";
export default {
  data() {
    return {
      value: 3,
      shops:[],
      icon:false,
    };
  },
  components: { TypeFood,ShopList ,NavBar},
 created(){
    this.show()
    getFoodShops({
      latitude:"31.22967",
      longitude:"121.4762"
    })
    //请求商家列表
    .then((res)=>{
    // console.log(res);
    this.shops=res.data
    })
    .catch((err)=>{
      console.log(err);
    })
  },
  methods: {
    show(){
     if(window.localStorage.getItem("user_id")){
        this.show = true
      }else{
        this.show = false
      }
    },
    onclickleft() {
      console.log(1);
    },
    onclickright() {
      console.log(2);
    },
    login(){
      if(window.localStorage.getItem("user_id")){
        this.$router.push('/home/user')
      }else{
        this.$router.push('/login')
      }
      
    },
    selectcity(){
      this.$router.push('/city')
    },
    search(){
      this.$router.push('/home/search')
    }
  },
};
</script>

<style lang="scss" scoped>
.van-nav-bar {
  background: rgb(2, 182, 253, 0.7);
}

.loginContainer {
  padding-top: 1.95rem;
  p,
  span,
  input {
    font-family: Helvetica Neue, Tahoma, Arial;
  }
  // .right {
  //   line-height: 10px;
    
  // }
}
.loginForm {
  background-color: #fff;
  margin-top: 0.6rem;
}
.shangjia{
  height:25px;
  .van-icon{
    padding:0 15px;
  }
}
</style>